<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>牛马※平台</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div id="app">
    <div class="header">
      <div class="nav">
        <div>
          <a href="#" target="_blank">
            <img src="img/logo.png" title="牛※马音乐" />
            <span @click="hh(a)">🐮※🐴</span>
          </a>
        </div>
        <div>
          <input
            id="keyWord"
            type="text"
            placeholder="歌手|专辑|歌曲名"
          /><button id="search">🔍</button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="nav">
        <ul>
          <li>推荐</li>
          <li>排行榜</li>
          <li>歌手</li>
          <li>歌单</li>
          <li>MV</li>
        </ul>
      </div>
      <video ref="video" controls src=""></video>
    </div>
    </div>
    <script src="js/vue-2.6.10.js"></script>
    <script src="js/axios-1.3.4.js"></script>
    <script>
      let http = axios.create({
        baseURL:"https://www.wx992.com/",
      })

      new Vue({
        el: "#app",
        data(){
          return{
            id: location.hash.substr(1)
          }
        },
        created(){//页面加载
          //请求MP4
          http.get("/api/music/mv/" + this.id).then(r=>{
            this.$refs.video.src = r.data.data.url;
            this.$refs.video.play();
          })
        },
        methods:{
          hh(a){
            alert('欢迎来到牛马星');
            return false;
          },
        }
      })
    </script>
  </body>
</html>
